<template>
    <van-nav-bar
        title="新增优惠券"
        left-text="返回"
        left-arrow
        fixed
        @click-left="onClickLeft"
    />
    <div class="my-tabs">
        <div class="coupon">
            <van-list
                finished-text="没有更多了"
            >
                <van-cell
                    v-for="item in couponAddListings"
                >
                    <van-row>
                        <van-col style="text-align: right;"> <!-- 将文本对齐设置为右对齐 -->
                            <span>￥</span><span style="font-size: 30px; color: blue;">{{item.discount}}</span> <!-- 加大字体并设置颜色为蓝色 -->
                        </van-col>
                        <van-col style="text-align: left;padding-left: 70px;"> <!-- 保持文本左对齐 -->
                            {{item.name}}<br>
                            {{item.info}}<br>
                            <div style="margin-left: 10px; color: #1a1a1a;">
                                <div style="font-size: 14px;"> <!-- 保持字体大小为14px -->
                                    至 {{item.endTime}} <!-- 显示开始和结束日期 -->
                                </div>
                            </div>
                        </van-col>
                        <button class="button" @click="couponAdd(item.couponsId)">领取</button>
                    </van-row>
                </van-cell>
            </van-list>
        </div>
    </div>


</template>

<script setup>
import {ref} from "vue";
import {get} from "../../util/request.js";
import {useRoute, useRouter} from "vue-router";
import {showToast} from "vant";
const router=useRouter();
const onClickLeft = () => history.back();

const couponAddListings = ref([
    {discount:80,startDate:2020-11-11,endTime:2025-11-11,state:1,name:'新增优惠券1',info:'优惠券啊新增',},
    {discount:12,startDate:2020-11-11,endTime:2025-11-11,state:1,name:'新增优惠券2',info:'优惠券啊新增',},
    {discount:45,startDate:2020-11-11,endTime:2025-11-11,state:1,name:'新增优惠券3',info:'优惠券啊新增',},
    {discount:8,startDate:2020-11-11,endTime:2025-11-11,state:1,name:'新增优惠券4',info:'优惠券啊新增',},
    {discount:66,startDate:2020-11-11,endTime:2025-11-11,state:1,name:'新增优惠券5',info:'优惠券啊新增',},
]);// 增加优惠券列表

get("user/couponAdd/list").then(res=>{
    if (res.code === 0){
        couponAddListings.value = res.data
        console.log(JSON.stringify(couponAddListings.value))
    } else {
        showToast("网络错误")
    }
})
const couponAdd = (couponsId) => {
    get("user/coupon/add",{id:couponsId}).then(res=>{
        if (res.code === 0){
            showToast("新增优惠券成功")
            router.push({ path: '/coupon'});
        } else {
            showToast("网络错误")
        }
    })
}
</script>

<style scoped>
.coupon {
    /* 设置位置，比如距离顶部一定的距离 */
    /*margin-top: 60px;*/
    /* 设置宽度 */
    width: 100%;
    /* 其他美化样式，比如背景色、边框等 */
    background-color: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 20px;
}
.my-tabs {
    position: fixed; /* 使用固定定位 */
    top: 50px; /* 距离页面顶部50px */
    left: 10px; /* 左侧对齐 */
    width: 100%; /* 宽度占满全屏 */
    z-index: 1000; /* 设置较高的z-index以确保其在其他内容之上 */
}
.button{
    position: fixed; /* 使用固定定位 */
    right: 40px; /* 左侧对齐 */
}
</style>